<!DOCTYPE html>
<html lang="zh-cmn-Hans">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!-- MDUI CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/css/mdui.min.css"
        integrity="sha384-2PJ2u4NYg6jCNNpv3i1hK9AoAqODy6CdiC+gYiL2DVx+ku5wzJMFNdE3RoWfBIRP" crossorigin="anonymous" />
    <title>托莱尼国际贸易（上海）有限公司</title>
    <!-- MDUI JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"
        integrity="sha384-aB8rnkAu/GBsQ1q6dwTySnlrrbhqDwrDnpVHR2Wgm8pWLbwUnzDcIROX3VvCbaK+"
        crossorigin="anonymous"></script>

</head>

<body
    class="mdui-drawer-body-left mdui-appbar-with-toolbar  mdui-theme-primary-indigo mdui-theme-accent-pink mdui-theme-layout-auto">
    <header class="mdui-appbar mdui-appbar-fixed">
        <div class="mdui-toolbar mdui-color-theme">
            <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"
                mdui-drawer="{target: '#main-drawer', swipe: true}"><i class="mdui-icon material-icons">menu</i></span>
            <a href="../" class="mdui-typo-headline mdui-hidden-xs">托莱尼国际贸易（上海）有限公司</a>
            <!-- <a href="./" class="mdui-typo-title">面积计算</a> -->
            <div class="mdui-toolbar-spacer"></div>
            <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"
                mdui-dialog="{target: '#dialog-docs-theme'}" mdui-tooltip="{content: '设置主题'}"><i
                    class="mdui-icon material-icons">color_lens</i></span>
        </div>
    </header>

    <a id="anchor-top"></a>

    <div class="mdui-container">
        <h1>成本核算系统</h1>
        <h1 class="mdui-text-color-theme">
            瓶数：
            <select class="mdui-select" mdui-select="{position: 'bottom'}" id="count">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="12">12</option>
                <option value="24">24</option>
            </select>
            瓶
        </h1>
        <div class="mdui-row">
            <div class="mdui-textfield mdui-textfield-floating-label mdui-col-xs-4">
                <label class="mdui-textfield-label">酒汁（ 元/瓶）</label>
                <input class="mdui-textfield-input" id="wine-water" onblur="checkNum()" />
            </div>
            <div class="mdui-textfield mdui-textfield-floating-label mdui-col-xs-4">
                <label class="mdui-textfield-label">酒瓶（ 元/个）</label>
                <input class="mdui-textfield-input" id="wine-bottle" onblur="checkNum()" />
            </div>
            <div class="mdui-textfield mdui-textfield-floating-label mdui-col-xs-4">
                <label class="mdui-textfield-label">酒标（ 元/个）</label>
                <input class="mdui-textfield-input" id="wine-tag" onblur="checkNum()" />
            </div>
        </div>
        <div class="mdui-row">
            <div class="mdui-textfield mdui-textfield-floating-label mdui-col-xs-4">
                <label class="mdui-textfield-label">酒塞（ 元/个）</label>
                <input class="mdui-textfield-input" id="wine-top" onblur="checkNum()" />
            </div>
            <div class="mdui-textfield mdui-textfield-floating-label mdui-col-xs-4">
                <label class="mdui-textfield-label">酒帽（ 元/个）</label>
                <input class="mdui-textfield-input" id="wine-hat" onblur="checkNum()" /> 
            </div>
            <div class="mdui-textfield mdui-textfield-floating-label mdui-col-xs-4">
                <label class="mdui-textfield-label">瓶包纸（ 元/瓶）</label>
                <input class="mdui-textfield-input" id="bottle-paper" onblur="checkNum()" />
            </div>
        </div>
        <div class="mdui-row">
            <div class="mdui-textfield mdui-textfield-floating-label mdui-col-xs-4">
                <label class="mdui-textfield-label">瓶缠膜（ 元/瓶）</label>
                <input class="mdui-textfield-input" id="bottle-skin" onblur="checkNum()" />
            </div>
            <div class="mdui-textfield mdui-textfield-floating-label mdui-col-xs-4">
                <label class="mdui-textfield-label">加工费（ 元/瓶）</label>
                <input class="mdui-textfield-input" id="work-fee" onblur="checkNum()" />
            </div>
            <div class="mdui-textfield mdui-textfield-floating-label mdui-col-xs-4">
                <label class="mdui-textfield-label">其他瓶包装费用（ 元/瓶）</label>
                <input class="mdui-textfield-input" id="other-fee" onblur="checkNum()" />
            </div>
        </div>
        <div class="mdui-row">
            <div class="mdui-textfield mdui-textfield-floating-label mdui-col-xs-4">
                <label class="mdui-textfield-label">包装箱（ 元/个）</label>
                <input class="mdui-textfield-input" id="box" onblur="checkNum()" />
            </div>
            <div class="mdui-textfield mdui-textfield-floating-label mdui-col-xs-4">
                <label class="mdui-textfield-label">箱覆膜（ 元/个）</label>
                <input class="mdui-textfield-input" id="box-skin" onblur="checkNum()" />
            </div>
            <div class="mdui-textfield mdui-textfield-floating-label mdui-col-xs-4">
                <label class="mdui-textfield-label">其他整箱包装费用（ 元/箱）</label>
                <input class="mdui-textfield-input" id="box-fee" onblur="checkNum()" /> 
            </div>
        </div>
        
        <div class="mdui-row">
            <div class="mdui-col-xs-8">
                <span class="mdui-text-color-theme" id="ans">预估价格：无</span>
            </div>
            <div class="mdui-col-xs-4">
                <button class="mdui-btn mdui-color-theme-accent mdui-ripple" onclick="caculator()">开始计算</button>
            </div>
        </div>
    </div>

    <script src="//cdn.jsdelivr.net/npm/smooth-scroll@16.1.3/dist/smooth-scroll.polyfills.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/holderjs@2.9.7/holder.min.js"></script>
    <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.1/build/highlight.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"></script>
    <script>
        var $ = mdui.$;
        function checkNum() {
            ids = ["wine-water", "wine-bottle", "wine-tag","wine-top", "wine-hat", "box", "box-skin", "bottle-paper", "bottle-skin", "work-fee", "other-fee", "box-fee"]
            for (i in ids) {
                element = document.getElementById(ids[i]).value
                if (isNaN(element)) {
                    num = parseInt(i) + 1
                    init()
                }
            }
        }
        function caculator() {
            base = 0
            ids = ["wine-water", "wine-bottle", "wine-tag","wine-top", "wine-hat", "bottle-paper", "bottle-skin", "work-fee", "other-fee"]
            for (i in ids) {
                num = Number(document.getElementById(ids[i]).value)
                base = base + num
            }
            sele = parseInt(document.getElementById("count").value)
            box = Number(document.getElementById("box").value)
            box_skin = Number(document.getElementById("box-skin").value)
            box_fee = Number(document.getElementById("box-fee").value)
            value = (base * sele + box_fee + box + box_skin).toFixed(2)
            document.getElementById("ans").innerText = "预估价格： " + value + " 元"
        }

        function init() {
            document.getElementById("ans").innerText = "预估价格：无"
        }
    </script>
    <script src="//cdn.w3cbus.com/mdui.org/docs/assets/docs/js/docs-v1.js"></script>
</body>

</html>